<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4"
      layout:decorate="~{manage/layout}" lang="zh">
<head>
    <title>组织管理</title>
    <style rel="stylesheet">
        .mdc-tree {
            margin-top: 16px
        }

        .data-table {
            width: calc(100% - 300px);
            margin-left: 16px;
        }
    </style>
</head>
<body>
<div layout:fragment="main-container" class="main-container">
    <div class="organize-tree">
        <div class="organize-operator-container">

        </div>
        <div id="mdcTree" class="mdc-tree"></div>
    </div>
    <div id="mdc-data-table" class="mdc-data-table__container mdc-float__left data-table">
        <!--扩展搜索条件-->
        <div class="search-container-extend">
        </div>
        <div class="operator-container">
            <div class="btn-container">
                <button class="mdc-button mdc-button--raised" id="refreshBtn">
                    <span class="mdc-button__label">刷新</span>
                </button>
                <a class="mdc-button mdc-button--raised" th:href="@{/manage/organize}"
                   sec:authorize="hasAnyAuthority('global:create','organize:create')">
                    <span class="mdc-button__label">添加</span>
                </a>
                <button class="mdc-button mdc-button--raised" id="editBtn" disabled
                        sec:authorize="hasAnyAuthority('global:write','organize:write')">
                    <span class="mdc-button__label">编辑</span>
                </button>
                <button class="mdc-button mdc-button--raised" id="delBtn" disabled
                        sec:authorize="hasAnyAuthority('global:delete','organize:delete')">
                    <span class="mdc-button__label">删除</span>
                </button>
                <button class="mdc-button mdc-button--raised" id="menuBtn" disabled
                        sec:authorize="hasAnyAuthority('global:write','organize:write')">
                    <span class="mdc-button__label">菜单配置</span>
                </button>
                <button class="mdc-button mdc-button--raised" id="privilegeBtn" disabled
                        sec:authorize="hasAnyAuthority('global:write','organize:write')">
                    <span class="mdc-button__label">权限配置</span>
                </button>
            </div>
            <div class="search-container">
                <div class="mdc-text-field text-field mdc-text-field--fullwidth mdc-text-field--no-label mdc-ripple-upgraded mdc-text-field--with-trailing-icon"
                     data-mdc-auto-init="MDCTextField">
                    <input type="text" id="criteria" class="mdc-text-field__input"
                           placeholder="请输入名称" autocomplete="off" data-enter-trigger="refreshTable">
                    <i class="material-icons mdc-text-field__icon" tabindex="0" role="button" id="searchBtn">search</i>
                    <div class="mdc-line-ripple"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<th:block layout:fragment="script">
    <script type="text/javascript" th:inline="javascript">
      $(function() {
        console.log(' organizes: ', [[${organizes}]]);
        let mdcDataTable;
        let organizeId;
        let mdcTree = $('#mdcTree').mdcTree({
          data: [[${organizes}]],
          id: 'id',
          parentId: 'prevId',
          label: 'name',
          icon: 'icon',
          expandAll: false,
          checkbox: true,
          toggleEvt: function(cell) {
            console.log(' 点击元素: ', cell.dataset.id);
            console.log('已选择项', mdcTree.getSelectItems());
            organizeId = cell.dataset.id;
            // 表格初始化
            window.mdcDataTable = $('#mdc-data-table').mdcDataTable({
              url: '/manage/organize/' + organizeId + '/post',
              queryParams: {},
              container: '#mdc-data-table',
              columns: [
                {
                  data: 'name',
                },
                {
                  data: 'remark',
                },
              ],
              thead: [
                {
                  data: '姓名',
                  style: 'mdc-data-table__cell--non-numeric',
                },
                {
                  data: '备注',
                  style: 'mdc-data-table__cell--non-numeric',
                },
              ],
              // 是否分页,暂不支持
              pagination: true,
              // 页面数据条数,暂不支持
              pageSize: 5,
              // 设置页面可以显示的数据条数,暂不支持
              pageList: [5, 10, 15, 20],
              // 首页页码
              pageNumber: 1,
              editable: false,
              callback: function() {
              },
              noneSelect: function() {
                $('#editBtn').prop('disabled', true);
                $('#delBtn').prop('disabled', true);
                $('#roleBtn').prop('disabled', true);
                $('#menuBtn').prop('disabled', true);
                $('#privilegeBtn').prop('disabled', true);
              },
              singleSelect: function() {
                $('#editBtn').prop('disabled', false);
                $('#delBtn').prop('disabled', false);
                $('#roleBtn').prop('disabled', false);
                $('#menuBtn').prop('disabled', false);
                $('#privilegeBtn').prop('disabled', false);
              },
              multipleSelect: function() {
                $('#editBtn').prop('disabled', true);
                $('#delBtn').prop('disabled', false);
                $('#roleBtn').prop('disabled', true);
                $('#menuBtn').prop('disabled', true);
                $('#privilegeBtn').prop('disabled', true);
              },
            });
            window.mdcDataTable.refresh({id: organizeId, criteria: $('#criteria').val()});
          },
        });

        window.refreshTable = function() {
          window.mdcDataTable.refresh({id: organizeId, criteria: $('#criteria').val()});
        };
        // 刷新,搜索
        $('#refreshBtn,#searchBtn').click(refreshTable);
        // 编辑
        $('#editBtn').on('click', function() {
          let selectItems = mdcDataTable.getSelectItems();
          if (selectItems.length !== 1) {
            $.alert('请选择一条记录');
            return false;
          }
          window.location.href = '/manage/organize/' + selectItems[0].id;
        });
        // 删除
        $('#delBtn').on('click', function() {
          let selectItems = mdcDataTable.getSelectItems();
          if (selectItems.length < 1) {
            $.alert('请至少选择一条记录');
            return false;
          }
          $.confirm('确认要删除这' + selectItems.length + '条记录么 ?', function() {
            let ids = [];
            selectItems.forEach(function(item) {
              ids.push(item.id);
            });
            $.delete('/manage/organize/deleteBatch', {'ids': ids.toString()}, function(res) {
              console.log(JSON.stringify(res));
              $.alert(res.msg);
              let delCount = selectItems.length;
              mdcDataTable.refresh({}, delCount);
            }, function(res) {
              console.log(JSON.stringify(res));
              $.alert(res.msg);
            });
          });
        });
        // 菜单配置
        $('#menuBtn').on('click', function() {
          let selectItems = mdcDataTable.getSelectItems();
          if (selectItems.length < 1) {
            $.alert('请至少选择一条记录');
            return false;
          }
          let id = selectItems[0].id;
          $('#menus').load('/manage/organize/' + id + '/menus', function() {
            let html = $(this).html();
            $(this).empty();
            $(this).hide();
            $.modal(html, function(dom) {
              let menuIds = [];
              $.each($(dom.target).find('.mdc-form-field'), function(index, item) {
                let checkbox = $(item).find('input[id^=checkbox-]');
                if ($.checked(checkbox)) {
                  menuIds.push(checkbox.val());
                }
              });
              $.put('/manage/organize/' + id + '/menus', {'menuIds': menuIds.toString()}, function(res) {
                res.result === true ? $.alert(res.msg, function() {
                  mdcDataTable.refresh();
                }) : $.alert(res.msg);
              });
            });
          });
        });
      });
    </script>
</th:block>
</body>
</html>
